<template>
  <div class="form">
    <input
    id="touxiang"
      class="input"
      ref="input"
      type="file"
      name="photos"
      multiple="multiple"
      accept="image/jpg,image/jpeg,image/png,image/svg"
      @change="getFile($event)"
    />
    <div class="touxiang">
      <label for="touxiang" class="upload">
      点击上传头像
    </label>
    <img v-show="true" :src="img" alt="">
    </div>
    <!-- <form action="http://localhost:3000/image" method="post" enctype="multipart/form-data">
    <input type="file" name="photos"  id="" multiple='multiple' accept="image/jpg,image/jpeg,image/png,image/svg">
    <input type="submit" value="提交">
    </form> -->
    
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      img:'../../assets/img/Profile/user/bg4.jpg'
    };
  },
  methods: {
    getFile(e) {
      console.log(e.target.files.length);
      let formData = new FormData();
      let file = e.target.files[0];

      formData.append("file", file);
      console.log(formData.get("file"));
      // let formart = e.target.files[i].name.split(".")[1];
      let config={
        headers:{'Content-Type':'multipart/form-data'}
      }
      
      this.$axios({
        url:'/image',
        method:'post',
        data:formData
      }).then(res=>{
        this.img = res.data
        console.log(res)
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.input{
  display: none;
}
.touxiang{
  width: 100px;
  height: 100px;
  background-image: url('../../assets/img/Profile/user.svg');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin: auto;
}
.upload{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  background-color: aqua;
  color: aliceblue;
}
</style>
